<template>
  <div class="wrap">
    <div id="box">
      <div id="marquee">{{text}}</div>
      <div id="copy"></div>
    </div>
    <div id="node">{{text}}</div>
  </div>
</template>
<script>
import { defineComponent, reactive, ref, toRaw, watch } from "vue";
import {LoadingOutlined, PlusOutlined} from "_@ant-design_icons-vue@6.1.0@@ant-design/icons-vue";

export default defineComponent({
  props: {
    lists: {
      type: Object,
    }
  },
  data () {

  },
  setup(props, context) {
    let text = reactive('')

    watch(props,(props) => {
        for (let i = 0; i < props.lists.length; i++) {
          text += '         ' + props.lists[i]
        }
      move()
    })
    const move = () => {
      console.log("txt",text)
      let width = document.getElementById('node').getBoundingClientRect().width
      let box = document.getElementById('box')
      let copy = document.getElementById('copy')
      copy.innerText = text // 文字副本填充
      let distance = 0 // 位移距离
      // 设置位移
      setInterval(function () {
        distance = distance - 1
        // 如果位移超过文字宽度，则回到起点
        if (-distance/10 >= text.length) {
          distance = 16
        }
        box.style.transform = 'translateX(' + distance + 'px)'
      }, 40)
    }
    return{
      text,
      move
    }
  },
})
</script>
<style scoped>
/*样式的话可以写*/
.wrap {
  overflow: hidden;
  background: white;
  font-size: 18px;
  line-height: 30px;
}
#box {
  width: 500%;
}
#box div {
  float: left;
}
#marquee {
  margin: 0 16px 0 0;
}
#node {
  position: absolute;
  z-index: -99;
  top: -99px;
}
</style>
